初衷:之前我习惯用印象笔记进行知识的收集和整理,虽然很好用,但终归只适合输入而不适合输出。我需要的是一个更加开放的平台,在这上面可以输出:1.学习的收获 ;2.生活的感想 ;3.有价值的分享,因此有了这个博客网站。
用hexo+github pages 可以很方便地搭建一个个人博客网站,不需要购买域名和服务器,只需要按部就班操作即可。我自己大概是花了两三个小时搞定,主要是因为对git bash的使用不够熟悉,因此走了一些弯路。实际上动作快的话半个小时就可以搞定。下面是对部署过程的大概介绍,以及必须注意的事项(划重点,也就是所谓的“坑”)。由于本文参考了大量博客,所以在文末我会列出原文链接。
一.Github,Github pages ,Hexo
首先介绍一下这三个东西,有大概的了解、知道是什么东西就可以。GitHub是一个面向开源及私有软件项目的托管平台,而GIthub Pages则是github的一项功能,可以放置网页文件到指定文件夹,然后给你一个专属域名用于展示一些项目,现在大多用来开发和制作个人博客网站。它的好处在于域名和服务器都是免费提供的,并且没有网站数量的限制。而Hexo 是一个快速、简洁且高效的博客框架,它使用Markdown解析文章,在几秒内,就可以利用靓丽的主题生成静态网页。(关于Hexo的详细介绍,请看官方文档 https://hexo.io/zh-cn/docs/ ,这里就不展开了)。因此,可以说github和hexo是绝配。接下来,开始我们的工作。
二. 环境和必要准备
我个人的环境:win10,64bit
必要准备:你需要
(1)github账号 :前往https://github.com/ 官网注册就好
(2)git : 最新版本的git(本文发表的时候是2.20.1版本),前往https://git-scm.com/ 官网下载并安装。安装完后前往git文件夹下打开git bash,运行以下命令:
git config --global user.name "username"
git config --global user.email "your mail"
注:将username替换为自己的github账号名,将your mail替换为自己注册github时绑定的邮箱。这一步非常重要,当时部署的时候我因为遗漏了这一步,导致后面报错.
(3)node.js : 前往 https://nodejs.org/en/ 下载并安装。
这两个的安装比较简单,一路next就好,不过我推荐还是修改一下路径,尽量放在自己可以找到的位置。
(4)hexo :打开git文件夹下的git bash,运行 以下命令安装hexo
npm install -g hexo-cli
依次运行以下命令进行hexo的初始化
$ hexo init <folder>
$ cd <folder>
$ npm install
注:请将上面代码的<folder>
替换成你自己想要的文件夹名字,以我为例,我想要在git文件夹下新建一个Myblog文件夹以存放站点文件,那么我这里的代码就应该是
$ hexo init Myblog
$ cd Myblog
$ npm install
成功之后,我们会在git文件夹下看到新建的Myblog文件夹,这个就是我们的站点文件夹,网站相关文件都存放在这里。
这里顺便介绍一下cd Myblog
的作用,可以理解为“进入Myblog运行git bash”,你也可以在Myblog中右键运行git bash(如下图),效果是一样的。
在之后介绍的操作中,凡是需要输入命令的,请确保你已经cd进自己的站点文件夹。
接着上面的代码,我们继续运行:
hexo server
这将在本地打开我们的网站,当提示”xxx is running at xxx“的时候,我们可以通过http://localhost:4000/ 这个网址预览我们的网站,想要切断连接,只需要在命令行窗口按下ctrl+c。至此,hexo博客已经在本地搭建好了。接下来,我们要将hexo和github进行对接。
三. hexo与github 实现对接
1.建立仓库
还记得我们之前注册的github账号吗?现在,请进入github网站,并点击头像选择your repository,我们现在需要创建一个仓库(也就是repository)用于存放相关站点文件。按照下图顺序进行设置:
其中,Repository name也即是我们的仓库名字,必须是 Github账号名称.github.io的格式。比如你的github名字是ccc,那么仓库名字必须是ccc.github.io 。
2.对接github
在git bash中运行以下命令,安装 hexo-deployer-git 插件。
npm install hexo-deployer-git --save
运行以下命令,创建SSH key。(注:和上面一样,请将your mail替换成github邮箱地址)
$ ssh-keygen -t rsa -C "your mail"
前往 C:\Users\Administrator.ssh\id_rsa.pub (注意,这只是大概位置。不同系统路径可能不同,但是大同小异)打开id_rsa.pub文件(可以用记事本打开,但是推荐用sublime text)。复制文件中的全部内容,前往 https://github.com/settings/keys ,将刚才复制的内容粘贴在New SSH key 的文本框中。
前往站点目录下(例如:git/ Myblog),打开_config.yml 文件,对文件末尾进行如下修改:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:username/username.github.io.git
branch: master
在这里要注意,1)所有的冒号距离右边的内容之间都有一个空格,如果没有空格,则修改是无效的。2)和前面一样,将usename替换成我们自己的github用户名 。 3)repo后面的地址,在旧版本的hexo中是http地址,但在新版本的hexo用的是ssh地址,我们统一用如上所示的ssh地址。有些博客由于没有进行更新,在说明这个问题的时候依然用的是http地址,造成了一定程度上的误导。
运行以下命令,对接并推送内容到github。
$ hexo g
$ hexo d
等待片刻,打开 https://<Github账号名称>.github.io (例如 https://ccc.github.io ) 即可进入你搭建好的个人博客网站了。当然,网站默认用的是landscape主题,比较难看,关于主题的美化和后期一些插件的添加,可以参考文章末尾贴出的链接。
PS:
这里顺便介绍一下常用的 hexo 命令:hexo clean
————————>清除缓存文件和已生成的静态文件hexo g
或者 hexo generate
————————>生成静态文件hexo d
或者hexo deploy
————————>生成静态文件并部署到仓库hexo s
或者 hexo server
—————————>在本地打开网站
一般来说,在对网站进行修改后,我们可以先用hexo g和hexo s 在本地预览效果,如果效果符合预期的话再用hexo d 推送到 github。当然,可能会遇到本地打开和域名打开的效果不一致,这种情况下通常是因为 1. 没有用hexo clean 清除缓存 2. 没有清除浏览器缓存(ctrl+f5 ) 3.忘记用hexo d 将本地文件推送到github 4. 本地和线上的同步本身需要时间,所以上述方法如果无效,可以尝试等几分钟,再打开网站就正常显示了。
参考自:
https://www.jianshu.com/p/3a05351a37dc
https://www.simon96.online/2018/10/12/hexo-tutorial/